<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style rel="stylesheet">
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0.7em 1.2em 0.54em;
            border: 0.16em solid #f33050;
            white-space: nowrap;
            font: bold 72px sans-serif;
            text-transform: uppercase;
            color: #f33050;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            -webkit-transition: font-size 0.3s, text-shadow 0.3s;
            transition: font-size 0.3s, text-shadow 0.3s;
        }
        p::before,
        p::after {
            content: attr(data-content);
            position: absolute;
            top: 0.7em;
            left: 1.2em;
            opacity: 0.4;
            cursor: pointer;
        }
        p.boom {
            font-size: 76px;
            text-shadow: 0 0 8px;
            -webkit-transition: font-size 0.3s, text-shadow 0.3s;
            transition: font-size 0.3s, text-shadow 0.3s;
        }
        p.boom::before,
        p.boom::after {
            opacity: 0;
            -webkit-transition: top 0.3s, left 0.3s, opacity 0.3s;
            transition: top 0.3s, left 0.3s, opacity 0.3s;
        }
        p.boom::before {
            top: 30px;
            left: 40px;
        }
        p.boom::after {
            top: 76px;
            left: 116px;
        }
    </style>
</head>
<body>
<p>手拉手</p>
</body>
</html>
<script>
    ! function() {
        var boomTimeout;
        var p = document.querySelector('p');

        // dataset isn't well supported enough yet...
        p.setAttribute('data-content', p.textContent);

        function boom() {
            p.className = 'boom';
            window.clearTimeout(boomTimeout);
            boomTimeout = window.setTimeout(unboom, 300);
        }

        function unboom() {
            p.className = '';
        }

        setInterval(function() {
            console.log('now');
            boom();
            setTimeout(boom, 400);
        }, 1800);

        boom();

        p.addEventListener('click', boom, false);
    }();
</script>